/**
 * @desc: 系统客服组件
 */

import React from 'react';
import Iconfont from '@/components/IconFont';
import { Tooltip } from 'antd';
import styles from './index.module.less';
// import { getCurrentUser } from '@/services/user';
import { getCurrentUser } from '@/utils/authority';
export default class CustomService extends React.Component {

	//获取用户信息
	initData = async () => {
    const data = getCurrentUser();
		//初始化客服插件
    if(!window.zc) {
      (function (w, d, e, x) {
        w[e] = function () {
          w.cbk = w.cbk || []
          w.cbk.push(arguments);
        }
        x = d.createElement('script');
        x.async = true;
        x.id = 'zhichiScript';
        x.className = 'zcBtn',  //该class可自行设置，只需要在使用的自定义入口上同名即可
        x.src = "https://zhaojiafang.sobot.com/chat/frame/v2/entrance.js?sysnum=d3dd5834838542328e73eddfc2c64bd6";
        d.body.appendChild(x);
      })(window, document, 'zc');
      const obj = data || {};
      //初始化配置
      zc('config', {
        //设置自定义按钮生效
        custom: true,
        color: '318efd',
        to_customsys_open_style: 1,
        msg_flag: 1,
        uname:obj.account,
        partnerid:obj.partnerId,
      })
      //监听未读消息数
      zc('receive_message',function(res){
        try {
          if(res.length > 0) {
            const el = document.getElementById('zc-msgNum');
            let val = parseInt(el.innerHTML) + parseInt(res.length);
            let val1 = val > 99 ? '99+' : val;
            el.innerHTML = val1;
            el.style.visibility = 'visible';
          }
        } catch (error) {
          console.log(error);
        }
      })

      //监听离线消息数
      zc("offline_message_count",function(res){
        try {
          if(res.size > 0) {
            const el = document.getElementById('zc-msgNum');
            let val = res.size > 99 ? '99+' : res.size;
            el.innerHTML = val;
            el.style.visibility = 'visible';
          }
        } catch (error) {
          console.log(error);
        }
      })
    }
    //监听聊天页面关闭事件
    window.onmessage = function(e){
      if(e&&e.data && typeof e.data == 'string'){
        try {
          const {name,data} = JSON.parse(e.data || {});
          if(name==='zc_post_message'){
            //监听 action 为 chat_collapse_window 的postmessage
            switch(data.action){
              case 'chat_collapse_window':
                const el = document.getElementById('zc-msgNum');
                el.innerHTML = 0;
                el.style.visibility = 'hidden';
              break;
            }
          }
        } catch (error) {
          
        }
      }
    }
	}

  componentDidMount() {
		this.initData();
  }

  //处理清空
  componentWillUnmount() {
    window.onmessage = null;
  }

  //点击客服按钮清空未读消息
  handleClickBtn = () => {
    const el = document.getElementById('zc-msgNum');
    try {
      el.style.visibility = 'hidden';
      el.innerHTML = 0;
    } catch (error) {
      console.log(error);
    }
  }

  shouldComponentUpdate() {
    return false;
  }


  render() {
    const msgStyle = {
      visibility: 'hidden',
      minWidth: '20px',
      height: '20px',
      // padding: '0 6px',
      color: '#fff',
      fontWeight: 400,
      fontSize: '12px',
      lineHeight: '20px',
      whiteSpace: 'nowrap',
      textAlign: 'center',
      background: '#ff4d4f',
      borderRadius: '10px',
      boxShadow: '0 0 0 1px #fff'
    }

    return (
      <Tooltip title='在线客服'>
        <span className='zcBtn' id='zcBtn' style={{ display: 'flex' }} onClick={this.handleClickBtn}>
            <span className={styles.iconWrapperWithBg}>
              <Iconfont type='iconmicrophone' className={styles.icon} />
            </span>
            <sup>
              <span id='zc-msgNum' style={ msgStyle }>0</span>
            </sup>
        </span>
      </Tooltip>
    )
  }
}

